<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="http://localhost/resource/back/">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="lib/zTree/v3/css/demo.css" type="text/css">
    <link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.exedit-3.5.js"></script>
    <script type="text/javascript" src="js/AjaxUtils.js"></script>
    <script type="text/javascript" src="js/JsonUtils.js"></script>
    <script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            callback:{
                //事件回调
                onRemove: zTreeOnRemove,
                onRename: zTreeOnRename,
                onDrop: zTreeOnDrop
            },
            edit: {
                enable: true,
                showRenameBtn: true,
                showRemoveBtn: true,
            },
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
            }

        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [
            {name:"test1", open:true, children:[
                    {name:"test1_1"}, {name:"test1_2"}]},
            {name:"test2", open:true, children:[
                    {name:"test2_1"}, {name:"test2_2"}]}
        ];
        $(document).ready(function(){
            //页面初始化发送请求
           get("back/goodsTypeController/getGoodsTypeTreeList",function(resp) {
               console.info(resp)
               zNodes= format(resp.data)
               zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
           })
           /* var treeObj = $.fn.zTree.getZTreeObj("tree");
            var nodes = treeObj.getNodes();
            treeObj.moveNode(nodes[0], nodes[1], "inner");*/
        });
        function zTreeOnRename(event, treeId, treeNode, isCancel) {
            var param = new Object();
            param.id=treeNode.id;
            param.goodsTypeName=treeNode.name
            send("/back/goodsTypeController/updateNodes",param,function (response) {
                console.info(response)
            })
        }
        function zTreeOnRemove(event, treeId, treeNode) {

          get("/back/goodsTypeController/delNodes/"+treeNode.id,function (response) {
               console.info(response)
          })
        }
        function addHoverDom(treeId, treeNode) {
            var aObj = $("#" + treeNode.tId + "_a");

            if ($("#diyBtn_"+treeNode.id).length>0) return;

            var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span>"
                + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
                + "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";
            aObj.append(editStr);
            var btn = $("#diyBtn_"+treeNode.id);
            if (btn) btn.bind("click", function(){
                var index = layer.open({
                    type: 2,
                    content: 'http://localhost/back/goodsTypeController/addGoodsType.html?id='+treeNode.id,
                    area: ['320px', '195px'],
                    maxmin: false
                });
            });

        };

        function removeHoverDom(treeId, treeNode) {
            $("#diyBtn_"+treeNode.id).unbind().remove();
            $("#diyBtn_space_" +treeNode.id).unbind().remove();
        };
        function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
            var trId=treeNodes[0].id
            var tarId=targetNode.id
            get("/back/goodsTypeController/moveNodes/"+trId+"/"+tarId,function (response) {
                console.info(response)
            })

        };


    </SCRIPT>
</head>
<body>
<div>
    <ul id="treeDemo" class="ztree"></ul>

</div>
</body>
</html>